<template>
  <div v-if="tip">
    <a-tooltip :title="tip" >
      <check-circle-two-tone v-if="status" :two-tone-color="color" />
      <info-circle-two-tone v-else :two-tone-color="color" />
    </a-tooltip>
      <span class="p-l-5">{{ text }}</span>
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
} from "vue";
import { CheckCircleTwoTone, InfoCircleTwoTone } from "@ant-design/icons-vue";
export default defineComponent({
  name: "OwnStatusTip",
  components: {
    CheckCircleTwoTone,
    InfoCircleTwoTone,
  },
  props: {
    name: {
      type: String,
      request: true,
    },
    status: {
      type: Boolean,
      request: true,
    },
    text: {
      type: String,
      request: true,
    },
  },
  setup(props) {
    const tip = computed(() => {
      return `当前${props.name}${props.status ? "可用" : "已被禁用"}`;
    });
    const color = computed(() => {
      return props.status ? "#52c41a" : "#ff4d4f";
    });

    return {
      tip,
      color,
    };
  },
});
</script>
<style lang="less" scoped>
</style>